<template>
    <div id="body">
        <div class="tree">
            <!-- <a-input-search v-model="searchStr" placeholder="输入搜选项" style="width:200px;"
                @search="onSearch"></a-input-search> -->

            <!-- <a-input-search v-model:value="searchValue" @input="handleSearch" style="margin-bottom: 8px" placeholder="Search" @search="search" /> -->
            <a-tree :tree-data="treeData" v-model:expandedKeys="expandedKeys" :field-names="fieldNames" @select="select"
                :autoExpandParent="true" @expand="onExpand">
                <!-- <template slot='title' slot-scope={name}>
          <span v-html="name.replace(new RegExp(searchValue,'g'),'<span style=color:#f50>'+ searchValue +'</span>')"></span>
        </template> -->
                <!-- <template #title="{ name, key }">
                    <span v-if="name.indexOf(searchValue) > -1">
                        {{ name.substr(0, name.indexOf(searchValue)) }}
                        <span style="color: #f50">{{ searchValue }}</span>
                        {{ name.substr(name.indexOf(searchValue) + searchValue.length) }}
                    </span>
                    <span v-else>{{ name }}</span>
                </template> -->
            </a-tree>
        </div>
        <div class="table">
            <!-- <div style="display: flex;justify-content: space-between;margin: 10px;">
                <span>当前选择：</span>
                <div>
                    <span></span>
                </div>
            </div> -->
            <div class="from" v-if="shipIs">
                <a-form layout="inline" :model="formShipState">
                    <a-form-item label="交付船舶识别号">
                        <a-input v-model:value="formShipState.deliveryShipId" placeholder="请输入交付船舶识别号" />
                    </a-form-item>
                    <a-form-item label="交付船舶名称">
                        <a-input v-model:value="formShipState.deliveryShipName" placeholder="请输入交付船舶名称" />
                    </a-form-item>
                    <a-form-item label="污染物类型">
                        <a-select v-model:value="formShipState.pollutantType" show-search placeholder="请输入选择污染物类型"
                            style="width: 200px" :options="PollOptions" @change="PollChange"></a-select>
                    </a-form-item>
                    <a-form-item label="交付时间">
                        <a-config-provider :locale="zhCN">
                            <a-range-picker v-model:value="planeDate" show-time format="YYYY-MM-DD HH:mm:ss"
                                value-format="YYYY-MM-DD HH:mm:ss" style="width: 260px;" @change="planeDateChange" />
                        </a-config-provider>
                    </a-form-item>
                    <a-form-item>
                        <a-button style="margin-right: 10px;" @click="restShip">重置</a-button>
                        <a-button type="primary" @click="getShipCheck">查询</a-button>
                    </a-form-item>
                    <a-form-item>
                        <a-button style="margin-right: 10px;width: 24px;height: 32px;display: flex;align-items: center;justify-content: center" type="primary" @click="toMax"  >
                            <ExpandOutlined style="font-size: 20px;"/>
                        </a-button>

                    </a-form-item>
                </a-form>
            </div>
            <div class="from" v-else>
                <a-form layout="inline" :model="formPortState">
                    <a-form-item label="接收船舶识别号">
                        <a-input v-model:value="formPortState.receiveShipId" placeholder="请输入交付船舶识别号" />
                    </a-form-item>
                    <a-form-item label="接收船舶名称">
                        <a-input v-model:value="formPortState.receiveShipName" placeholder="请输入交付船舶名称" />
                    </a-form-item>
                    <a-form-item label="污染物类型">
                        <a-select v-model:value="formPortState.pollutantType" show-search placeholder="请输入选择污染物类型"
                            style="width: 200px" :options="PollOptions" @change="PollChange"></a-select>
                    </a-form-item>
                    <a-form-item label="交付时间">
                        <a-config-provider :locale="zhCN">
                            <a-range-picker v-model:value="planePortDate" show-time format="YYYY-MM-DD HH:mm:ss"
                                value-format="YYYY-MM-DD HH:mm:ss" style="width: 260px;"
                                @change="planeDatePortChange" />
                        </a-config-provider>
                    </a-form-item>
                    <a-form-item>
                        <a-button style="margin-right: 10px;" @click="restPort">重置</a-button>
                        <a-button type="primary" @click="getPortCheck">查询</a-button>
                        
                   
                    </a-form-item>
                    <a-form-item>
                        
                        <a-button style="margin-right: 10px;width: 24px;height: 32px;display: flex;align-items: center;justify-content: center" type="primary" @click="toMax"  >
                            <ExpandOutlined style="font-size: 20px;"/>
                        </a-button>
                   
                    </a-form-item>
                </a-form>
            </div>
            <a-config-provider :locale="zhCN">
                <a-table :columns="columns" :data-source="reserveData" :scroll="{ x: 1300,y:400}"
                    :pagination="pagination" @change="pagination.change" :loading="loading">

                    <template #bodyCell="{ column, record, index }" slot="showDecimalsOrnot">
                        <template v-if="column.key == 'id'">
                            <a style="color: #2f5da1;">{{ index + 1 }}</a>
                        </template>
                        <template v-if="column.key == 'discriminateImg'">
                            <div style=" display: flex;justify-content: space-around;height: 30px;">
                                <a-image :width="50" v-for="item in record.disImgList" style="height: 25px;"
                                    :src="'http://198.22.15.178:8090/wgfw_qf/goadminapi' + item" />
                            </div>

                        </template>
                        <template v-if="column.key == 'img'" style="height: 30px;">
                            <div style=" display: flex;justify-content: space-around;height: 30px;">
                                <a-image :width="50" v-for="item in record.imgList" style="height: 25px;"
                                    :src="'http://198.22.15.178:8090/wgfw_qf/goadminapi' + item" />
                            </div>

                        </template>
                    </template>
                </a-table>
            </a-config-provider>
        </div>
        <div>
            <a-modal v-model:open="openModal"  :footer="null" width="100%" wrap-class-name="full-modal" >
                <a-config-provider :locale="zhCN">
                    <a-table :columns="columns" :data-source="reserveData" :scroll="{ x: 1300, y: 450 }"
                        :pagination="pagination" @change="pagination.change" :loading="loading">

                        <template #bodyCell="{ column, record, index }" slot="showDecimalsOrnot">
                            <template v-if="column.key == 'id'">
                                <a style="color: #2f5da1;">{{ index + 1 }}</a>
                            </template>
                            <template v-if="column.key == 'discriminateImg'">
                                <div style=" display: flex;justify-content: space-around;height: 30px;">
                                    <a-image :width="50" v-for="item in record.disImgList" style="height: 25px;"
                                        :src="'http://198.22.15.178:8090/wgfw_qf/goadminapi' + item" />
                                </div>

                            </template>
                            <template v-if="column.key == 'img'" style="height: 30px;">
                                <div style=" display: flex;justify-content: space-around;height: 30px;">
                                    <a-image :width="50" v-for="item in record.imgList" style="height: 25px;"
                                        :src="'http://198.22.15.178:8090/wgfw_qf/goadminapi' + item" />
                                </div>

                            </template>
                        </template>
                    </a-table>
                </a-config-provider>
            </a-modal>
        </div>
    </div>
</template>
<script setup>
import {
    ref,
    reactive,
    defineEmits,
    onMounted,
    defineProps,
    computed,
    watch
} from "vue";
import zhCN from "ant-design-vue/es/locale/zh_CN"
import { ExpandOutlined } from '@ant-design/icons-vue';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
import 'dayjs/locale/zh-cn'
import { getPollTree, getPort, getShip } from "@/api/wash";
const table = {
    pageNum: 1,
    pageSize: 10
}
const selectValue = ref([])
const portTable = {
    pageNum: 1,
    pageSize: 10
}
const shipTable = {
    pageNum: 1,
    pageSize: 10
}
const expandedKeys = ref(["010202120201_重庆海事局"])
const onExpand = () => {

}
onMounted(() => {
    columns.value = portColumns
    getTree()
    // getShipList('石港环保号')
    // getPortList('武汉新港白浒山')
})

const loading = ref(false)
const shipIs = ref(false)
const pagination = reactive({
    current: 1,
    defaultPageSize: 10,
    showTotal: (total, range) => `共${total}条`,
    onShowSizeChange: (current, pageSize) => { table.pageSize = pageSize; table.pageNum = 1 },
    onChange: (pageNum) => {

        pagination.current = pageNum
        if (shipIs.value) {
            shipTable.pageNum = pageNum
            getShipList(shipCodeName.value)
        } else {
            portTable.pageNum = pageNum
            getPortList(portCodeName.value)
        }
    }

})
const columns = ref([])
const portColumns = [
    {
        title: "序号", key: "id", align: "center", width: 80, fixed: 'left'

    },
    {
        title: "码头名称",
        dataIndex: "wharfName",
        key: 'wharfName',
        className: 'color',
        width: 150,
        fixed: 'left',
        ellipsis: true
    },
    { title: "码头所属单位", dataIndex: "affiliatedUnit", key: 'affiliatedUnit', width: 150, ellipsis: true },
    { title: "接收船舶", dataIndex: "receiveShipName", key: 'receiveShipName', width: 150, ellipsis: true },
    { title: "接收船舶识别号", dataIndex: "receiveShipId", key: 'receiveShipId', width: 150, ellipsis: true },

    {
        title: "接收船舶MMSI", dataIndex: "receiveShipMmsi", key: "receiveShipMmsi", width: 150, ellipsis: true
    },
    { title: "作业人员", dataIndex: "operator", key: 'operator', width: 100, ellipsis: true },

    { title: "作业人员联系方式", dataIndex: "operatorPhone", key: 'operatorPhone', width: 150, ellipsis: true },


    { title: "污染物类型", dataIndex: "pollutantType", key: "pollutantType", width: 120, ellipsis: true },
    { title: "接收起码", dataIndex: "receivingStart", key: 'receivingStart', width: 150, ellipsis: true },

    { title: "接收止码", dataIndex: "receivingEnd", key: 'receivingEnd', width: 130, ellipsis: true },
    { title: "接收量", dataIndex: "receivedQuantity", key: "receivedQuantity", width: 180, ellipsis: true },
    { title: "交付时间", dataIndex: "deliverTime", key: "deliverTime", width: 180, ellipsis: true },
    { title: "交付地点", dataIndex: "deliverPlace", key: "deliverPlace", width: 180, ellipsis: true },
    { title: "流量计图片", dataIndex: "discriminateImg", key: 'discriminateImg', width: 120, ellipsis: true },
    { title: "现场图片", dataIndex: "img", key: 'img', width: 100, ellipsis: true },
    { title: "备注", dataIndex: "remarks", key: 'remarks', width: 100, ellipsis: true },
]
const shipColumns = [
    {
        title: "序号", key: "id", align: "center", width: 80, fixed: 'left'

    },
    {
        title: "接收船舶",
        dataIndex: "receiveShipName",
        key: 'receiveShipName',
        className: 'color',
        width: 150,
        fixed: 'left',
        ellipsis: true
    },
    {
        title: "接收船舶MMSI", dataIndex: "receiveShipMmsi", key: "receiveShipMmsi", width: 150, ellipsis: true
    },
    { title: "接收船舶识别号", dataIndex: "receiveShipId", key: "receiveShipId", width: 150, ellipsis: true },

    { title: "交付船舶", dataIndex: "deliveryShipName", key: "deliveryShipName", width: 180, ellipsis: true },
    { title: "交付船舶MMSI", dataIndex: "deliveryShipMmsi", key: 'deliveryShipMmsi', width: 150, ellipsis: true },
    { title: "交付船舶识别号", dataIndex: "deliveryShipId", key: 'deliveryShipId', width: 150, ellipsis: true },

    { title: "作业人员", dataIndex: "operator", key: 'operator', width: 100, ellipsis: true },

    { title: "作业人员联系方式", dataIndex: "operatorPhone", key: 'operatorPhone', width: 150, ellipsis: true },


    { title: "污染物类型", dataIndex: "pollutantType", key: "pollutantType", width: 120, ellipsis: true },
    { title: "接收起码", dataIndex: "receivingStart", key: 'receivingStart', width: 150, ellipsis: true },

    { title: "接收止码", dataIndex: "receivingEnd", key: 'receivingEnd', width: 130, ellipsis: true },
    { title: "接收量", dataIndex: "receivedQuantity", key: "receivedQuantity", width: 180, ellipsis: true },
    { title: "交付时间", dataIndex: "deliverTime", key: "deliverTime", width: 180, ellipsis: true },
    { title: "交付地点", dataIndex: "deliverPlace", key: "deliverPlace", width: 180, ellipsis: true },
    { title: "流量计图片", dataIndex: "discriminateImg", key: 'discriminateImg', width: 120 },
    { title: "现场图片", dataIndex: "img", key: 'img', width: 100, ellipsis: true },
    { title: "备注", dataIndex: "remarks", key: 'remarks', width: 100, ellipsis: true },];
const reserveData = ref([])
const fieldNames = {
    children: 'children',
    title: 'name',
};
const treeData = ref([
]);
const getTree = () => {
    getPollTree().then(res => {
        // console.log(res.data.data)
        res.data.data.key = res.data.data.bjOrgCode
        let children = []
        res.data.data.children?.forEach((officeItem, index) => {
            let key = officeItem.bjOrgCode + '_' + officeItem.name
            officeItem.key = key
            officeItem.children?.forEach((classItem, index) => {
                let key = classItem.bjOrgCode + '_' + classItem.name
                // let key = classItem.name
                classItem.key = key
                classItem.children?.forEach((shipItem, index) => {
                    let key = shipItem.bjOrgCode + '_' + shipItem.name
                    shipItem.key = key
                })
            })
        });
        treeData.value.push(res.data.data)
        // console.log(res.data.data)
    })
}
// const treecheck = (value,data) => {
//     console.log(value,value.includes('接收船舶'),data,'选择')
//     if(data.node.children==null){
//         console.log(data,'选择')
//         console.log(data.node.name,'选择')
//         console.log(value,data.node.parent?.node.name, '选择')
//     }
// }
const shipCodeName = ref()
const portCodeName = ref()
const select = (value, data) => {
    // console.log(data.node.pos=='0-0-0',0-0-0-0,0-0-0-0-0)
    // if(data.node.pos=='0-0-0'){

    // }

    console.log(data, value, '点击')
    if (data.node.children == null) {
        // data.node.parent?.node.name.includes('接收船舶') ? getShipList(data.node.name) : getPortList(data.node.name)
        /*
        data.node.parent?.node.name.includes('接收船舶') ? (()=>{
            shipIs.value=true
            shipCodeName.value=data.node.name
            // getShipList(data.node.name)
            getShipList('石港环保号')
        })() : (()=>{
            shipIs.value=false
            portCodeName.value=ata.node.name
            // getPortList(data.node.name)
            getPortList('武汉新港白浒山')
        })()
            */
        if (data.node.parent?.node.name.includes('接收船舶')) {
            pagination.current = 1
            shipIs.value = true
            shipCodeName.value = data.node.name

            shipTable.pageNum = 1
            shipTable.pageSize = 10
            getShipList(data.node.name)
            // getShipList('石港环保号')
        } else {
            pagination.current = 1
            shipIs.value = false
            portCodeName.value = data.node.name

            portTable.pageNum = 1
            portTable.pageSize = 10
            getPortList(data.node.name)
            // getPortList('武汉新港白浒山')
        }
    }
}
const getPortCheck = () => {
    portTable.pageNum = 1
    portTable.pageSize = 10
    pagination.current = 1
    getPortList()
}
const getShipCheck = () => {
    shipTable.pageNum = 1
    shipTable.pageSize = 10
    pagination.current = 1
    getShipList()
}
const getPortList = (value) => {
    loading.value = true
    columns.value = portColumns
    let obj = {
        wharfName: portCodeName.value,
        ...portTable,
        ...formPortState.value
    }
    getPort(obj).then(res => {
        console.log(res, '码头')
        if (res.code == 200) {
            loading.value = false

            reserveData.value = res.data.data.list
            pagination.total = res.data.data.total
            reserveData.value.forEach(item => {
                if (item.createdAt) {
                    item.createdAt = item.createdAt.split('.')[0]

                }
                if (item.updatedAt) {
                    item.updatedAt = item.updatedAt.split('.')[0]
                }
                if (item.img) {
                    item.imgList = item.img.split(',')
                }
                if (item.discriminateImg) {
                    item.disImgList = item.discriminateImg.split(',')
                }
            })
        }
    })
}
const getShipList = (value) => {
    loading.value = true
    columns.value = shipColumns
    let obj = {
        receiveShipName: shipCodeName.value,
        ...shipTable,
        ...formShipState.value
    }
    getShip(obj).then(res => {
        console.log(res, '船舶')
        if (res.code == 200) {
            loading.value = false

            reserveData.value = res.data.data.list
            pagination.total = res.data.data.total
            reserveData.value.forEach(item => {
                if (item.createdAt) {
                    item.createdAt = item.createdAt.split('.')[0]

                }
                if (item.updatedAt) {
                    item.updatedAt = item.updatedAt.split('.')[0]
                }
                if (item.img) {
                    item.imgList = item.img.split(',')
                }
                if (item.discriminateImg) {
                    item.disImgList = item.discriminateImg.split(',')
                }
            })
        }
    })
}
// 接受船舶查询条件
const formShipState = ref({})
// 污染物类型
const PollValue = ref()
const PollOptions = ref([
    {
        value: '生活污水',
        label: '生活污水'
    },
    {
        value: '含油污水',
        label: '含油污水'
    },
    {
        value: '生活垃圾',
        label: '生活垃圾'
    },
    {
        value: '残油废油',
        label: '残油废油'
    }
])
const PollChange = (e) => {
    // Object.assign(queryParam.value, { pollutantType: e })
    // console.log(e, '污染物类型')
}
const planeDate = ref([])
// 交付时间更改
const planeDateChange = (value, dateString) => {
    // ACTUAL_START_DATE  ACTUAL_END_DATE
    Object.assign(formShipState.value, { deliveryStartDate: dateString[0] })
    Object.assign(formShipState.value, { deliveryEndDate: dateString[1] })

}
// 码头查询
const formPortState = ref({})
const planePortDate = ref([])
const planeDatePortChange = (value, dateString) => {
    Object.assign(formPortState.value, { deliveryStartDate: dateString[0] })
    Object.assign(formPortState.value, { deliveryEndDate: dateString[1] })
}
const restShip = () => {
    shipTable.pageNum = 1
    shipTable.pageSize = 10
    pagination.current = 1
    formShipState.value = {}
    planeDate.value = []
    getShipList(shipCodeName.value)
}
const restPort = () => {
    portTable.pageNum = 1
    portTable.pageSize = 10
    pagination.current = 1
    formPortState.value = {}
    planePortDate.value = []
    getPortList(portCodeName.value)
}
const openModal=ref(false)
const toMax=()=>{
    openModal.value=true
}
</script>
<style lang="scss" scoped>
#body {
    width: 60vw;
    height: 69vh;
    display: flex;
    .tree {
        margin-right: 10px;
        width: 250px;
        height: 100%;
        // height: 45vh;
        overflow-y: scroll;
    }

    .table {

        // display: none;
        height: 100%;
        width: calc(100% - 250px);
        overflow-y: scroll;
    }

}

::v-deep .ant-table-expanded-row-fixed {
    // min-height: 30vh !important;
}

::v-deep .ant-tree {
    height: 100%;
    width: 100%;
    // overflow: scroll;
}

::v-deep .ant-table-body {
    &::-webkit-scrollbar {
        height: 10px;
        width: 10px;
        overflow-y: scroll;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: #939392;
    }

    &::-webkit-scrollbar-track {
        -webkit-box-shadow: 0;
        border-radius: 0;
        background: #f0f2f5;
    }
}

::v-deep .tree {
    &::-webkit-scrollbar {
        height: 0px;
        width: 6px;
        overflow-y: scroll;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: #939392;
    }

    &::-webkit-scrollbar-track {
        -webkit-box-shadow: 0;
        border-radius: 0;
        background: transparent;
        // background: #f0f2f5;
    }
}
::v-deep .table {
    &::-webkit-scrollbar {
        height: 0px;
        width: 0px;
        overflow-y: scroll;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: #939392;
    }

    &::-webkit-scrollbar-track {
        -webkit-box-shadow: 0;
        border-radius: 0;
        background: transparent;
        // background: #f0f2f5;
    }
}

.from {
    margin: 4px;
    padding-top: 10px;
    // display: flex;

}

::v-deep .ant-form-item {
    margin-bottom: 4px !important;
}
// ::v-deep .ant-modal{
// display: flex !important;
// align-items: center !important;
// justify-content: center !important;
// margin: auto;
// }
// ::v-deep .ant-modal-content{
//     margin: auto !important;

// }
::v-deep .ant-table-content{
    max-height: calc(69vh - 100px) !important;
}
::v-deep .ant-table-container{
    .ant-table-body{
        max-height: calc(54vh - 100px) !important;
    }
}
</style>